var path = require('path')

//这个配置文件，其实就是一个 js 文件，通过 node 中的模块操作，向外暴露一个 配置对象

var path = require('path');

const webpack = require('webpack')

// 导入 
const htmlwebpackplugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
    entry : path.join(__dirname,'./src/main.js'),  //入口文件，表示要使用webpack 打包哪个文件
    output : {  // 出口文件，输出文件相关配置
        path : path.join(__dirname,'./dist'),  // 指定打包好的文件，输出到哪个目录中
        filename : 'bundle.js'  // 指定输出的文件名称
    },
    devServer:{  //配置dev-server命令参数的第二种方式，相对来说，这种方式麻烦一些
        //webpack-dev-server --open --port 3000 --contentBase src --hot
        open:true, //自动打开浏览器
        port:3000, //设置启动时候的运行端口
        contentBase:'src', //指定托管的根目录
        hot:true //启用热更新
    },
    plugins:[ //
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new htmlwebpackplugin({  //创建一个 在内存中 生存 html 页面
            template:path.join(__dirname,'./src/index.html'), //指定 模版页面，将来会根据指定的页面路径，去生存内存中的页面
            filename:'index.html'  // 指定生成的页面名称
        })
    ],
    module:{  //此节点用于配置 所有 第三方模块 的加载器
        rules:[  //所有模块的匹配规则
            { test : /\.css$/, use : ['style-loader','css-loader']},  // 配置处理.css文件的,从右到左匹配规则
            { test : /\.less$/, use : ['style-loader','css-loader','less-loader']},
            { test : /\.scss$/, use : ['style-loader','css-loader','sass-loader']},
            //limit 是给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定的大小,则不会转换为base64
            { test : /\.(jpg|jpeg|png|bmp|gif)$/, use : 'url-loader?limit=47233&name=[hash:8]-[name].[ext]'},
            { test : /\.(eot|svg|ttf|woff|woff2)$/, use : 'url-loader'},
            { test : /\.js$/, use : 'babel-loader', exclude : /node_modules/},
            { test : /\.vue$/, use : 'vue-loader'}
        ]
    },
    resolve:{
        alias:{
            //'vue$':'vue/dist/vue.js'
        }
    }

}